<template>
  <div class="bus-contains">
    <div class="title-css left-title-css"><span>{{ time }}</span></div>
    <div class="top-title-css"><span>票据服务管理平台商票数据统计</span></div>
    <div class="title-css right-title-css"><span>用户名</span></div>
  </div>
</template>

<script setup name="bus">

import { getCurrentInstance, proxyRefs, ref, onMounted, onBeforeUnmount } from "vue"
import { useRouter } from "vue-router"

import moment from 'moment'
import 'moment/dist/locale/zh-cn'

const {proxy} = getCurrentInstance()
const router = useRouter()


//存储当前时间
const time = ref(moment().format('llll'))
const timer = ref(null)



function updateTime(){
 timer.value = setInterval(() => {
    time.value = moment().format('llll')
    // console.log('定时器',moment().format('llll'),time.value)
 }, 1000);
} 
onMounted(() =>{
    updateTime()
})
onBeforeUnmount(() => {
    clearInterval(timer.value);
})


</script>

<style lang="scss" scoped>
.bus-contains{
    background: url('@/assets/image/header_bg.png') no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 80px;
    // background-color: red;

    display: flex;
    flex-direction: row;
    align-items: top;
    padding-top: 16px;
}

.title-css{
  color: #E5F0FF;
  width: 200px;
  display: flex;
  flex-direction: row-reverse;
}

.right-title-css{
 padding-right: 20px;
}
.left-title-css{
 padding-left: 20px;
}

.top-title-css{
 color: #fff;
 font-size: 28px;
 font-weight: 600;
 flex: 1;

    // color: transparent;
		// text-shadow: #111 0 0 6px;
		// user-select: none;
}



</style>
